<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>房屋管理/公房管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="6">
        宗地编号：
        <a-input placeholder="请输入" v-model="queryForm.publicHouseName" />
      </a-col>
      <!-- <a-col :span="6">
        所属街道：
        <a-input placeholder="请输入" v-model="queryForm.belongStrre" />
      </a-col> -->
      <a-col :span="6">
        公房门牌：
        <a-input placeholder="请输入" v-model="queryForm.houseNumber" />
      </a-col>
      <!-- <a-col :span="6">
        房屋结构类型：
        <a-input placeholder="请输入"
                 v-model="queryForm.dictName" />
      </a-col>
      <a-col :span="6">
        用途类型：
        <a-input placeholder="请输入"
                 v-model="queryForm.dictName" />
      </a-col> -->
      <a-col :span="4">
        <a-button type="primary" @click="handleSearch"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <div>房屋管理/公房管理</div>
        <div class="flex-end">
          <a-button
            type="primary"
            @click="addFn"
            v-hasPermi="['zhonghe:lxzz:add']"
            >添加</a-button
          >
          <a-spin :spinning="exportLoading">
            <a-button
              type="primary"
              @click="handleExport"
              v-hasPermi="['zhonghe:lxzz:add']"
              >导出</a-button
            >
          </a-spin>
        </div>
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
        >
          <template slot="description" slot-scope="text, record">
            <ToolTip :text="text" />
          </template>
          <!-- :row-selection="{ onSelectAll }" -->
          <template slot="imagePreview" slot-scope="text">
            <img
              v-if="text"
              :src="text"
              style="width: 100px; height: 100px; cursor: pointer"
              @click="handlePreview(text)"
            />
          </template>
          <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
          <span slot="action" slot-scope="text, record">
            <a @click="editFn(text, record)" v-hasPermi="['zhonghe:lxzz:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(text, record)"
              v-hasPermi="['zhonghe:lxzz:del']"
              class="red"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      title="公房管理配置"
      :visible="dialogVisible"
      width="45%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="putDict"
    >
      <a-form :form="form" style="height: 600px; overflow-y: auto">
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="所属街道"
        >
          <a-select
            style="width: 100%"
            v-decorator="[
              'belongStrre',
              { rules: [{ required: true, message: '请选择所属街道' }] },
            ]"
            placeholder="请选择所属街道"
          >
            <a-select-option
              v-for="(item, index) in addressList"
              :key="index"
              :value="item.baseStreet"
            >
              {{ item.baseStreet }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="业态情况"
        >
          <a-select
            style="width: 100%"
            v-decorator="[
              'businessType',
              { rules: [{ required: true, message: '请选择业态情况' }] },
            ]"
            placeholder="请选择业态情况"
          >
            <a-select-option
              v-for="(item, index) in businessTypeList"
              :key="index"
              :value="item.dictValue"
            >
              {{ item.dictValue }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="2024年测量建筑面积（生活/商铺）"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'checkBuildingM2024',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="2024年测量建筑面积"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'checkBuildingAllM2024',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="房屋坐落"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'houseAddressDetail',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="公房门牌"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'houseNumber',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="产权证建筑面积"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'leglBuildingM',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="产权单位"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'leglCompony',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="产权证号"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'leglNumber',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="位置坐标"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'lnglat',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="独用土地面积"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'ownerM',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="公房建筑名称（宗地编号）"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'publicHouseName',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="共有宗地面积"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'publicM',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="街道门牌"
        >
          <a-input
            style="width: 100%"
            v-decorator="[
              'strreNumber',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="图片"
        >
          <Upload :imageUrl="outImage" @getImg="getImgOut" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { message } from "ant-design-vue";
import Upload from "@/component/upload/index.vue";
import dayjs from "dayjs";
import crudMixin from "@/mixins/crudMixin";
export default {
  mixins: [crudMixin],
  components: {
    Upload,
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      total: 0,
      form: this.$form.createForm(this, { name: "coordinated" }),
      id: null,
      tableData: [],
      columns: [
        {
          title: "所属街道",
          dataIndex: "belongStrre",
          key: "belongStrre",
        },
        {
          title: "公房门牌",
          dataIndex: "houseNumber",
          key: "houseNumber",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "房屋坐落",
          dataIndex: "houseAddressDetail",
          key: "houseAddressDetail",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "产权证号",
          dataIndex: "leglNumber",
          key: "leglNumber",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "产权证面积",
          dataIndex: "leglBuildingM",
          key: "leglBuildingM",
        },
        {
          title: "共有宗地面积",
          dataIndex: "publicM",
          key: "publicM",
        },
        {
          title: "独用土地面积",
          dataIndex: "ownerM",
          key: "ownerM",
        },
        {
          title: "2024年测量建筑面积（生活/商铺）",
          dataIndex: "checkBuildingAllM2024",
          key: "checkBuildingAllM2024",
        },
        {
          title: "2024年测量建筑面积",
          dataIndex: "checkBuildingM2024",
          key: "checkBuildingM2024",
        },
        {
          title: "产权单位",
          dataIndex: "leglCompony",
          key: "leglCompony",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "公房建筑名称（宗地编号）",
          dataIndex: "publicHouseName",
          key: "publicHouseName",
        },
        {
          title: "坐标位置",
          dataIndex: "lnglat",
          key: "lnglat",
          scopedSlots: { customRender: "description" },
        },
        {
          title: "业态情况",
          dataIndex: "businessType",
          key: "businessType",
          scopedSlots: { customRender: "description" },
        },

        {
          title: "图片",
          dataIndex: "imageUrl",
          key: "imageUrl",
          scopedSlots: { customRender: "imagePreview" },
          width: 120,
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          scopedSlots: { customRender: "action" },
        },
      ],
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
      typeList: [
        {
          value: "1",
          label: "非公有经济组织",
        },
        {
          value: "2",
          label: "公有经济组织",
        },
      ],
      statusList: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "异常",
        },
        {
          value: 2,
          label: "停业",
        },
      ],
      addressList: [],
      businessTypeList: [],
      outImage: "",
      selectedRows: [],
      btnLoading: false,
      previewVisible: false,
      previewImage: "",
    };
  },
  async mounted() {
    await this.getDictList();
    await this.getList();
  },
  methods: {
    handleSearch(){
      this.queryForm.offset = 1;
      this.getList();
    },
    getImgOut(e) {
      this.outImage = e;
    },
    getList() {
      this.loading = true;
      const url =
        "government-platform-center/xunjian/publicBuilding/queryByPage";
      const data = this.queryForm;
      this.$axios.post(url, data).then((res) => {
        if (res.data.code == 0) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    getDictList() {
      const url = "/government-platform-center/case/getAddressArea";
      this.$axios.post(url).then((res) => {
        if (res.data.code == 0) {
          this.addressList = res.data.data;
        }
      });
      this.$axios
        .get(
          "/government-platform-center/dictData/queryByCode?dictType=merchant_code"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.businessTypeList = res.data.data;
          }
        });
    },
    cleanQuery() {
      this.queryForm = { current: 20, offset: 1 };
      this.getList();
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.current = pageSize;
      this.queryForm.offset = 1;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    delFn(text, record) {
      const that = this;
      Modal.confirm({
        title: "确认删除",
        content: "您确定要删除这项内容吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          const url = `/government-platform-center/xunjian/publicBuilding/delete?publicBuildingId=${text.id}`;
          that.$axios.delete(url).then((res) => {
            if (res.data.code == 0) {
              that.getList();
              message.success("操作成功");
            }
          });
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log("删除已取消");
        },
      });
    },
    onSelectAll(selected, selectedRows, changeRows) {
      this.selectedRows = selectedRows;
    },
    async handleExport() {
      let data = { ...this.queryForm };
      let url = "/government-platform-center/xunjian/publicBuilding/export";
      this.exportData(url, data, "公房管理");
    },
    addFn() {
      this.dialogVisible = true;
      this.id = null;
      this.form.resetFields();
    },
    editFn(text, record) {
      this.dialogVisible = true;
      const url = `/government-platform-center/xunjian/publicBuilding/detail?publicBuildingId=${text.id}`;
      const params = this.queryForm;
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.form.setFieldsValue(res.data.data);
            this.id = res.data.data.id;
            this.outImage = res.data.data.imageUrl;
          }
        });
    },
    putDict() {
      this.form.validateFields((err, values) => {
        if (err) {
          return;
        }
        if (!this.id) {
          let params = {
            ...values,
            imageUrl: this.outImage,
            registerTime: dayjs(values.registerTime).format("YYYY-MM-DD"),
            pushTime: dayjs(values.pushTime).format("YYYY-MM-DD"),
          };
          const url = "/government-platform-center/xunjian/publicBuilding/add";
          this.$axios.post(url, params).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.reSetForm();
              this.dialogVisible = false;
              message.success("操作成功");
            }
          });
        } else {
          const form = { ...values, id: this.id };
          let params = {
            ...form,
            imageUrl: this.outImage,
            registerTime: dayjs(form.registerTime).format("YYYY-MM-DD"),
            pushTime: dayjs(form.pushTime).format("YYYY-MM-DD"),
          };
          const url = "/government-platform-center/xunjian/publicBuilding/edit";
          this.$axios.post(url, params).then((res) => {
            if (res.data.code == 0) {
              this.getList();
              this.reSetForm();
              this.dialogVisible = false;
              message.success("操作成功");
            }
          });
        }
      });
    },
    reSetForm() {
      this.form.resetFields();
    },
    // 判断是否为图片文件
    isImageFile(url) {
      if (!url) return false;
      return /\.(png|jpg|jpeg|gif|bmp)$/i.test(url);
    },
    handlePreview(url) {
      if (!url) {
        this.$message.warning("没有可预览的文件");
        return;
      }

      if (this.isImageFile(url)) {
        // 如果是图片类型，可以尝试使用预览组件(如果存在)
        if (this.$preview && typeof this.$preview.open === "function") {
          this.$preview.open({
            src: url,
            downloadable: true,
          });
        } else {
          // 否则直接在新窗口打开
          window.open(url, "_blank");
        }
      } else {
        // 非图片文件直接在新窗口打开
        window.open(url, "_blank");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;

  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}
::v-deep .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold !important;
}
.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
